<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框教学</title>
		<style>
			div{
				/* CSS3属性：边框border属性(复合属性) 
				border:边框宽度 边框样式 边框颜色
				 主属性：子属性【提升为主属性】
				 边框宽度属性：border-width
				 边框样式属性：solid 实线 dashed 虚线 double平行线 dotted点线
				 
				 */
				
				border :1px solid red ;/* 一个像素红色实线边框 */
				border-width:10px ;
				/* div配宽高，不然看不出来 */
				width :200px;
				height :200px;
				border-style: dotted; 
				
				/* 边框左右上下设置：宽度，样式，颜色 */
				
				border-left-width:20px;
				border-top-style:double;
				border-right-style:solid;/* 具有层叠性 */
				
				/* 边框倒角：画圆   宽高值=倒角值，画圆*/
				border-radius:200px;/* 顺时针，左上，右上，右下，左下 */
				border-radius: 0 200px;/* 左上右下，右下左上 */
				border-radius: 100px  100px 200px;/*左上，右上左上，右下  */
				border-radius: 100px 100px 100px 100px;/* 常规写法 */
				
				/* 调整左下角 */
				border-bottom-left-radius: 10px;
				/* 调整右下角 */
				border-bottom-right-radius: 100px;
				
				/* 背景颜色属性：background-color:颜色值
				 色值单位：十六进制 #e4393c
				                  #000000
								  #ffffff
				       自己调色    */
				 
				background-color :#e4393c;
				
				/* 定位属性：将页面元素定位到指定位置(页面2d坐标轴) 
				          相对定位：相对某个元素定位，相对父元素，没有相对body
						  1.将元素确定为相对定位
				          position定位属性：relative
						  将元素x坐标定义数值(正负)
						  left：
						  将元素y坐标定义数值(正负)
				          top：
				*/
				position: relative  ;/* 1.将div元素添加相对定位 */
			  left:200px;/* 设置divX值 */
			  top:200px;/* 设置divY值 */
		
			}
		</style>
	</head>
	<body>
		<!-- 分区元素：一个页面区域，特点：有宽没高 -->
		<div></div>
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>